<template>
  <view class="warp">
    <!-- background pic start -->
    <view class="bg" :style="{height:'calc(440rpx + ' + StatusBar + 'px)'}">
      <view class="logo-contnt flex align-center justify-center flex-direction">
        <view class="logo width-180 height-180"></view>
        <!-- <view>欢迎来到fust-UI</view> -->
      </view>
    </view>
    <!-- background pic end -->
  
    <!-- 密码login start -->
    <view class="flex align-center solid-bottom margin-lr padding-tb">
      <image class="width-34 margin-right" src="../../static/phone1.png" mode="widthFix"></image>
      <input type="number" focus v-model="phone" maxlength="11" placeholder-class="fu-fs32 text-bf"
        :placeholder="i18n['请输入手机号']" name="input" />
    </view>
    <view class="flex align-center solid-bottom margin-lr padding-tb">
      <image class="width-34 margin-right" src="../../static/yzm.png" mode="widthFix"></image>
      <view class="flex align-center justify-between flex-sub" style="min-width: 1px;">
        <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf"
          type="number" v-model="vercode" :placeholder="i18n['请输入验证码']" minlength="4"/>
        <view class="vecode" @click="handleSendVerCode">
          {{ beginning ? time + i18n['s后重新获取'] : i18n['获取验证码'] }}
        </view>
      </view>
    </view>
    <view class="flex align-center solid-bottom margin-lr padding-tb">
      <image class="width-34 margin-right" src="../../static/pwd.png" mode="widthFix"></image>
      <view class="flex align-center justify-between flex-sub" style="min-width: 1px;">
        <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf" v-if="type == 'password'"
          type="password" v-model="password" :placeholder="i18n['请输入密码(6-12位字母+数字)']" minlength="6" maxlength="12" />
        <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf" v-if="type == 'text'"
          type="text" v-model="password" :placeholder="i18n['请输入密码(6-12位字母+数字)']" minlength="6" maxlength="12" />
        <image class="width-34" src="../../static/open.png" :data-type="type" @click.stop="is_kejian"
          v-if="type == 'text'" mode="widthFix"></image>
        <image class="width-34" src="../../static/close.png" :data-type="type" @click.stop="is_kejian"
          v-if="type == 'password'" mode="widthFix"></image>
      </view>
    </view>
    <!-- 邀请码start -->
   <!-- <view class="flex align-center solid-bottom margin-lr padding-tb">
      <image class="width-34 margin-right" src="../../static/phone1.png" mode="widthFix"></image>
      <input type="text" v-model="invite_code" placeholder-class="fu-fs32 text-bf"
        :placeholder="i18n['请输入邀请码']"/>
    </view> -->
    <!-- 邀请码end -->
    <!-- 密码login end -->
    <!-- 立即登录按钮 start -->
    <button type="success" class="text-white margin-lr-lg margin-top-lg bg-theme fu-fs32"
      shape="circle" @click="reg">
      {{i18n['注册']}}
    </button>
    <!-- 立即登录按钮 end -->
    <view class="text-center margin-top">
      {{i18n['已有账号，前去']}}
      <text class="text-theme" @click="handleJump" data-type="REDIRECT" data-url="/pages/user/login/login-password/index">{{i18n['登录']}}</text>
    </view>
    <view class="footer">
      <!-- 协议同意 start -->
      <view class="flex align-center justify-center text-666 fu-fs24 margin-top-64">
        <image class="width-30 height-30 margin-right-xs" @click="handle_select" v-if="is_select_agree"
          src="../../static/check.png"></image>
        <image class="width-30 height-30 margin-right-xs" @click="handle_select" v-else
          src="../../static/unchecked.png"></image>
        <view>
          {{i18n['已阅读并同意']}}
          <text class="text-theme" @tap="handleJump"
            data-url="/pages/user/login/user-agreement/index?id=1">《用户协议》</text>
          {{i18n['与']}}
          <text class="text-theme" @tap="handleJump"
            data-url="/pages/user/login/user-agreement/index?id=2">{{i18n['《隐私政策》']}}</text>
        </view>
      </view>
      <!-- 协议同意 end -->
    </view>
    <!-- 断网监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 断网监测 end -->
  
  </view>
</template>
<script>
  import {
  	SYSTEM_CONFIG
  } from "@/common/config.js";
  // 引入验证方法
  import { validate } from "@/common/utils/index";
  export default {
    data() {
      return {
        is_select_agree: false,
        phone: "", // 手机号,@String
        password: '', //密码
        vercode: "", // 验证码,@String
        invite_code:'',//邀请码
        type: 'password', //密码类型
        isLoading: false, // 立即登录按钮是否点击,@Boolean
        time: 60, // 倒计时60S,@Number
        beginning: false, // 显示倒计时,@Boolean
        timer: null, // 计时器,@Function
      };
    },
    onUnload() {
      // 页面关闭时清除计时器，优化性能
      clearInterval(this.timer);
    },
    methods: {
      /**
       * @param 是否选择同意协议
       */
      handle_select() {
        this.is_select_agree = !this.is_select_agree
      },


      /**
       * @event 发送验证码
       */
      handleSendVerCode() {
        // 如果按钮状态是加载中，直接return，防止用户多次点击
        if (this.isLoading) return;
        // 如果有倒计时，return false
        if (this.beginning) return false;
        if(!this.is_select_agree) return this.$message.info(this.i18n['请阅读并勾选页面协议']);
        // 从this里结构出来phone
        let {
          phone
        } = this;

        // 验证手机号strat
        if (!phone) return this.$message.info(this.i18n["请输入手机号"]);
        if (!validate(phone, "phone")) return this.$message.info(this.i18n["请正确输入手机号"]);
        // 验证手机号 end
        // 上述验证都通过，将按钮的点击状态改为true
        this.isLoading = true;
        /**
         * @desc 请求验证码接口
         * @param {Object} {} - 参数
         * @param {Boolean} {}.is_test - 是否是测试环境
         * @param {String} {}.mobile - 手机号
         * @param {String} {}.type - 类型
         */
        this.$api
          .post(global.apiUrls.GetVerifyCode, {
            is_test: global.IS_DEV,
            mobile: phone,
            type: "1",
          })
          .then((res) => {console.log("发送验证码: ", res);
            // 改加载状态为false

            // 如果后台返回的code码为1
            if (res.data.code == 1) {
              this.beginning = true; // 显示倒计时
              // 清除倒计时,防抖作用
              clearInterval(this.timer);
              this.timer = setInterval(() => {
                if (this.time == 1) {
                  //倒计时结束就清楚这个倒计时
                  clearInterval(this.timer);
                  this.time = 60; // 倒计时60s
                  this.beginning = false; // 是否显示倒计时改为false
                  return;
                }
                this.time--;
              }, 1000);
              // 向用户发送提示
              if (res.data.data.code) {
                this.$message.info(this.i18n['验证码为'] + res.data.data.code + this.i18n['请注意查收']);
                this.vercode = res.data.data.code;
              }
              // 把按钮的状态改为false
              this.isLoading = false;
            } else {
              // 把按钮的状态改为false
              this.isLoading = false;
              // 如果报错，向用户提示
              this.$message.info(res.data.msg);
            }
          })
          .catch(function(err) {
            // 把按钮的状态改为false
            this.isLoading = false;
          });
      },

      //密码是否可见
      is_kejian(e) {
        let type = e.currentTarget.dataset.type;
        if (type == 'password') {
          this.type = 'text';
        } else {
          this.type = 'password';
        }
      },

      /**
       * @description 注册
       * */
      reg() {
        // #ifdef APP-PLUS
        plus.key.hideSoftKeybord();
        // #endif
        // 如果按钮状态是加载中，直接return，防止用户多次点击
        if (this.isLoading) return;
        if(!this.is_select_agree) return this.$message.info(this.i18n['请勾选用户协议']);
        let {
          phone,
          vercode,
          password,
          invite_code
        } = this;
        // 验证表单数据是否正确
        if (!phone) return this.$message.info(this.i18n['请输入手机号']);
        if (!validate(phone, 'phone')) return this.$message.info(this.i18n['请输入正确的手机号']);
        if (!vercode) return this.$message.info(this.i18n['验证码不能为空']);
        if (!validate(password, 'password')) return this.$message.info(this.i18n['请输入字母加数字6-12位密码']);
        let clientId = 'clientId'
        let appSystem = 'appSystem'
        
        // #ifdef APP-PLUS
        clientId = plus.push.getClientInfo().clientid || '';
        appSystem = uni.getSystemInfoSync().platform == 'ios' ? 1 : 2;
        // #endif
        // 上述验证都通过，将按钮的点击状态改为true
        this.isLoading = true;
        // 请求注册接口
        this.$api.post(global.apiUrls.postRegisterByMobile, {
          mobile: phone,
          code: vercode,
          type: 1,
          password: password,
          invite_code: invite_code,
          user_source: SYSTEM_CONFIG.platform,
          clientId,
          appSystem
        }).then(res => {
          if (res.data.code == 1 && res.data.data) {
            // 注册成功 返回上一页
            this.$message.info(res.data.msg);
            this.$store.commit('updateUserInfo', res.data.data.userinfo);
            setTimeout(() => {
              // 把按钮的状态改为false
              this.isLoading = false;
              uni.navigateBack();
            }, 800);
          } else {
            // 把按钮的状态改为false
            this.isLoading = false;
            this.$message.info(res.data.msg);
          }
        }).catch(err => {
          // 把按钮的状态改为false
          this.isLoading = false;
        });
      }
    },
  };
</script>
<style lang="scss">
  // 主体 start
  .warp {
    background: #fff;
    min-height: 100vh;
    overflow: hidden;
  
    // background pic start
    .bg {
      width: 100%;
      position: relative;
      .logo-contnt {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .logo {
          background-image: url('/static/logo.png');
          background-repeat: no-repeat;
          background-size: contain;
          border-radius: 40rpx;
          overflow: hidden;
        }
      }
    }
    // background pic end
    // 验证码login end
  }
  // 主体 end
  .footer{
    position: fixed;
    bottom: 116rpx;
    bottom: calc(116rpx + constant(safe-area-inset-bottom));
    bottom: calc(116rpx + env(safe-area-inset-bottom));
    width: 100%;
  }
</style>
